import './App.css';
import 'src/assets/css/common.scss';
// react-toast css
import 'react-toastify/dist/ReactToastify.css';
import { useEffect } from 'react';
import { ToastContainer } from 'react-toastify';
import { useDispatch, useSelector } from 'react-redux';
import { useLocation, useNavigate } from 'react-router-dom';
import { GET_USER_INFO_ASYNC } from 'src/store/user/user.saga';
import RouterPage from './router';
import JLoading from './component/common/JLoading/JLoading';

function App(props) {
  const navigate = useNavigate();
  const location = useLocation();
  const dispatch = useDispatch();
  const loading = useSelector((state) => state.app.loading);

  useEffect(() => {
    function toLogin() {
      if (location.pathname !== '/login') {
        navigate('/login');
      }
    }

    function getToken() {
      // 有token就通过token登录
      const token = localStorage.getItem('token');
      if (token) {
        dispatch({
          type: GET_USER_INFO_ASYNC,
        });
      } else {
        toLogin();
      }
    }

    getToken();
    /* eslint-disable  react-hooks/exhaustive-deps */
    // 没必要加依赖，只渲染一次
  }, []);
  return (
    <div className="app">
      <RouterPage />
      <ToastContainer />
      <JLoading show={loading} />
    </div>
  );
}

export default App;
